<template>
  <view>
    <view class="box foo">
      <view class="cu-bar tabbar" :class="themeClass">
        <view :style="{ backgroundColor: bgColor ? '#fff' : '#272735' }" class="action" @click="gourl('../index/index')">
          <view class="cuIcon-cu-image">
            <image v-if="tab != 'home'" style="width: 40rpx; height: 40rpx" src="@/static/tabbar/tab_home.png" mode="scaleToFill"></image>
            <image v-else style="width: 40rpx; height: 40rpx" src="@/static/tabbar/tab_home_active.png" mode="scaleToFill"></image>
            <u-gap height="6rpx"></u-gap>
            <!-- <text :class="tab=='home'?'cuIcon-homefill text-cyans':'cuIcon-home text-hui'"></text> -->
          </view>
          <!-- <view :class="tab == 'home' ? 'text-cyans' : 'text-hui'">首页</view> -->
          <view>首页</view>
        </view>
        <view :style="{ backgroundColor: bgColor ? '#fff' : '#272735' }" class="action" @click="gourl('../card/card')">
          <image v-if="tab != 'card'" style="width: 40rpx; height: 40rpx" src="@/static/tabbar/tab_coupon.png" mode="scaleToFill"></image>
          <image v-else style="width: 40rpx; height: 40rpx" src="@/static/tabbar/tab_coupon_active.png" mode="scaleToFill"></image>
          <u-gap height="6rpx"></u-gap>
          <!-- #ifdef MP-WEIXIN -->
          <!-- <view :class="tab == 'card' ? 'text-cyans' : 'text-hui'">分类</view> -->
          <view>分类</view>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <!-- <view :class="tab == 'card' ? 'text-cyans' : 'text-hui'">卡类</view> -->
          <view>卡类</view>
          <!-- #endif -->
        </view>
        <view class="pos-rel" @click="gourl('../index/card')">
          <!-- <button class="cu-btn cuIcon-shop bg-gradual-orange shadow text-sm" @click="gourl('../index/card')"></button> -->
          <!-- #ifndef MP-WEIXIN -->
          <view class="btn-middle flex flex-center">
            <view class="flex flex-center bg-middle">
              <image style="width: 40rpx; height: 40rpx" src="@/static/tabbar/tab_middle.png" mode="scaleToFill"></image>
            </view>
          </view>
          <!-- <view :class="tab == 'sale' ? 'text-cyans' : 'text-hui'" class="pos-abs font26" style="bottom: 18rpx; left: 32rpx; z-index: 2">寄售</view> -->
          <!-- <view>寄售</view> -->
          <!-- #endif -->
          <!--  -->
          <!-- #ifdef MP-WEIXIN -->
          <view class="btn-middlee flex flex-center">
            <view class="flex flex-center bg-middle">
              <image style="width: 40rpx; height: 40rpx" src="@/static/tabbar/tab_middle.png" mode="scaleToFill"></image>
            </view>
          </view>
          <!-- <view :class="tab == 'sale' ? 'text-cyans' : 'text-hui'" class="pos-abs font26" style="bottom: 18rpx; left: 32rpx; z-index: 2">回收</view> -->
          <!-- #endif -->
          <!--  -->
        </view>

        <view :style="{ backgroundColor: bgColor ? '#fff' : '#272735' }" class="action" @click="gourl('../order/order')">
          <view class="cuIcon-cu-image">
            <image v-if="tab != 'orders'" style="width: 40rpx; height: 40rpx" src="@/static/tabbar/tab_order.png" mode="scaleToFill"></image>
            <image v-else style="width: 40rpx; height: 40rpx" src="@/static/tabbar/tab_order_active.png" mode="scaleToFill"></image>
            <u-gap height="6rpx"></u-gap>
          </view>
          <!-- <view :class="tab == 'orders' ? 'text-cyans' : 'text-hui'">订单</view> -->
          <view>订单</view>
        </view>
        <view :style="{ backgroundColor: bgColor ? '#fff' : '#272735' }" class="action" @click="gourl('../my/my')">
          <view class="cuIcon-cu-image">
            <image v-if="tab != 'my'" style="width: 40rpx; height: 40rpx" src="@/static/tabbar/tab_person.png" mode="scaleToFill"></image>
            <image v-else style="width: 40rpx; height: 40rpx" src="@/static/tabbar/tab_person_active.png" mode="scaleToFill"></image>
            <u-gap height="6rpx"></u-gap>
          </view>
          <!-- <view :class="tab == 'my' ? 'text-cyans' : 'text-hui'">我的</view> -->
          <view>我的</view>
        </view>
      </view>
    </view>
    <view class="cu-modal bottom-modal" :class="modalName == 'bottomModal' ? 'show' : ''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white">
          <view class="action text-blue" @tap="hideModal">
            <text class="text-gray cuIcon-close" style="color: #333333; font-size: 20px"></text>
          </view>
        </view>
        <view class="padding-xl">
          <navigator url="#" @click="gourl('../shop/fabu')">
            <text class="bgcolor text-gray cuIcon-forwardfill"></text>
            <text>发布商品</text>
          </navigator>
          <navigator url="#" @click="gourl('../shop/zuyuan')">
            <text class="bgcolora text-gray cuIcon-cartfill"></text>
            <text>我要采购</text>
          </navigator>
          <navigator url="#" @click="gourl('../shop/zuyuan')">
            <text class="bgcolorc text-gray cuIcon-shopfill"></text>
            <text>资源供应</text>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tab: '',
    bgColor: ''
  },
  data() {
    var that = this;
    return {
      modalName: null,
      currentTheme: '' //背景色
    };
  },
  watch: {
    bgColor: {
      immediate: true,
      // 监听 tab 的变化
      handler(newVal, oldVal) {
        this.currentTheme = this.getTheme();
      }
    }
  },

  mounted() {
    console.log(this.bgc, 5464466446);
    this.currentTheme = this.getTheme();
  },
  // 计算属性返回css样式
  computed: {
    themeClass() {
      return `theme-${this.currentTheme}`;
    }
  },
  methods: {
    // 获取本地样式
    getTheme() {
      return uni.getStorageSync('theme') || 'dark';
    },
    gourl: function (url) {
      if (url.indexOf('index/card') >= 0) {
        return uni.navigateTo({
          url: url,
          animationType: 'pop-in',
          animationDuration: 200
        });
      }
      uni.switchTab({
        url: url,
        animationType: 'pop-in',
        animationDuration: 200
      });
    },
    showModal(e) {
      this.modalName = e.currentTarget.dataset.target;
    },
    hideModal(e) {
      this.modalName = null;
    },
    showErr() {
      this.modalName = null;
      this.app.showMsg('暂未开通，敬请期待');
    }
  }
};
</script>

<style>
/* 定义主题样式 */
.theme-dark {
  background-color: #272735 !important;
  font-size: 26rpx;
  color: #fcecc9 !important;
}

.theme-light {
  background-color: #fff !important;
  font-size: 26rpx;
  color: #000 !important;
}
.btn-middlee {
  width: 120rpx;
  height: 120rpx;
  /* background: #292c3e; */
  opacity: 1;
  border-radius: 50%;
  position: relative;
  top: -15rpx;
}
.btn-middle {
  width: 120rpx;
  height: 120rpx;
  /* background: #292c3e; */
  opacity: 1;
  border-radius: 50%;
  position: relative;
  /* #ifdef MP-WEIXIN */
  top: -50rpx;
  /* #endif */
  /* #ifndef MP-WEIXIN */
  top: -20rpx;
  /* #endif */
}
.bg-middle {
  width: 80rpx;
  height: 80rpx;
  background: linear-gradient(180deg, #ffa459 0%, #f47441 100%);
  opacity: 1;
  border-radius: 50%;
  position: absolute;
}
/* .tabbar {
  background-color: #292c3e;
} */
.text-cyans {
  color: #fcecc9;
}
.foo {
  z-index: 100;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 -1px 3px rgb(0 0 0 / 10%);
}
.text-gray,
.line-gray,
.lines-gray {
  color: #ffffff;
}
.text-hui {
  color: #9094ac;
  font-size: 26rpx;
}
.padding-xl navigator {
  display: inline-block;
  width: 30%;
}
.padding-xl navigator text {
  display: block;
  margin: auto;
  margin-top: 20upx;
}
.padding-xl navigator text:nth-child(1) {
  border-radius: 40px;
  width: 70upx;
  padding: 25upx;
  font-size: 60upx;
}
.bgcolor {
  background-color: #ff719a;
  background-image: linear-gradient(to top, #ff719a 0%, #ffa99f 100%);
  box-shadow: 0 3px 7px rgb(255 133 154 / 25%);
}
.bgcolora {
  background-color: #0caf99;
  background-image: linear-gradient(to top, #0caf99 0%, #81e8fb 100%);
  box-shadow: 0 3px 7px rgb(255 133 154 / 25%);
}
.bgcolorc {
  background-color: #0657ef;
  background-image: linear-gradient(to top, #0657ef 0%, #7893ff 100%);
  box-shadow: 0 3px 7px rgb(255 133 154 / 25%);
}
</style>
